<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="app">
    <h2>{{type==1?"新增文章":"修改文章"}}</h2>
    <input type="text" v-model="article.title" placeholder="请输入文章标题">
    <br><br>
    <textarea v-model="article.content" placeholder="在此处输入文章的内容"></textarea>
    <br><br>
    <button @click="save()">保存</button>
</div>
<script type="application/javascript" src="js/vue.js"></script>
<script type="application/javascript" src="js/axios.js"></script>
<script>
    let app = new Vue({
        el:"#app",
        data:{
            type:"",
            article:{
                id:"",
                title:"",
                content:""
            }
        },
        created:function () {
            //页面初始化
            let type = localStorage.getItem("type");
            if(type==="add"){
                document.title="新增文章"
                this.type = 1;
            }else{
                //修改文章
                document.title="修改文章"
                this.type = 2;
                //获取文章id
                let id = localStorage.getItem("id");
                let vm = this;
                axios.get("detail?id="+id)
                .then(function (resp) {
                    let body = resp.data;
                    if (body.success){
                        vm.article=body.data;
                    }else{
                        alert(body.message)
                    }
                })
            }
        },
        methods: {
            save:function () {
                let url;
                if (this.type===1){//新增文章
                    url="add"
                }else {
                    url="change"
                }
                //发送ajax请求
                axios.post(url,this.article)
                .then(function (resp) {
                    let body = resp.data;
                    if (body.success){
                        window.location.href="article.html"
                    }else{
                        alert(body.message)
                    }
                })
            }
        }
    })
</script>
</body>
</html>